<% if spree_navigation_data.any? %>
  <div class="h-100" role="navigation" aria-label="<%= Spree.t('nav_bar.desktop') %>">
    <ul class="nav h-100 main-nav-bar">
      <% spree_navigation_data.each do |root| %>
        <li class="p-0 nav-item main-nav-bar-category">
          <% has_dropdown = root[:items].present? || root[:promo_banners].present? %>
          <% dropdown_toggle_class = has_dropdown ? "dropdown-toggle" : "" %>
          <% data_attr = has_dropdown ? { toggle: "dropdown" } : {} %>
          <% aria_attr = has_dropdown ? { haspopup: true, expanded: false } : {} %>
          <%= link_to root[:title], root[:url], class: "nav-link main-nav-bar-item main-nav-bar-category-button #{dropdown_toggle_class}",  data: data_attr, aria: aria_attr %>
          <% if has_dropdown %>
            <div class="dropdown-menu w-100 shadow main-nav-bar-category-dropdown">
              <div class="container p-0 d-flex justify-content-xl-around mx-auto">
                <div class="row">
                  <% if root[:items].present? %>
                    <div class="category-links">
                      <% if root[:subtitle].present? %>
                        <div class="category-links-header text-uppercase">
                          <%= root[:subtitle] %>
                        </div>
                      <% end %>
                      <ul class="pl-0">
                        <% root[:items].each do |item| %>
                          <li>
                            <%= link_to item[:title], item[:url], class: "text-uppercase main-nav-bar-category-links dropdown-item" %>
                          </li>
                        <% end %>
                      </ul>
                    </div>
                  <% end %>
                  <% if root[:promo_banners].present? %>
                    <% root[:promo_banners].each do |promo_banner| %>
                      <%= link_to promo_banner[:url], class: "dropdown-item" do %>
                        <div class="category-image text-center mx-3">
                          <%= main_nav_image(promo_banner[:image], promo_banner[:title]) %>
                          <div class="category-box">
                            <div class="category-box-small-text">
                              <%= promo_banner[:subtitle] %>
                            </div>
                            <div class="category-box-big-text">
                              <%= promo_banner[:title] %>
                            </div>
                          </div>
                        </div>
                      <% end %>
                    <% end %>
                  <% end %>
                </div>
              </div>
            </div>
          <% end %>
        </li>
      <% end %>
    </ul>
  </div>
<% end %>
